import styled from 'styled-components';

export const Vessel = styled.div`
  width: 100%;
  height: 100%;
  overflow:auto;
  ::-webkit-scrollbar{
    display: none;
  }
  padding: 0 15px;
`

export const TitleVessel = styled.div`
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 1px;
`

export const TitleHandle = styled.div`
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
`
export const HandleVessel = styled.div`
 width: auto;
 height: auto;
 display: flex;
 align-items: center;
 white-space: nowrap;
 font-size: 14px;
`

export const FileInput = styled.input`
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
`
export const StatVessel = styled.div`
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 14px;
`
export const StatText = styled.span`
   font-size: 16px;
`
export const StatusVessel = styled.div`
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 14px;
  padding: 5px;
`
export const StatusDesc = styled.span`
   font-size:13px ;
   margin-right: 10px;
`
export interface StatusStyle {
  color: string
}
export const StatusDescInfo = styled.span<StatusStyle>`
  font-size:13px ;
  color: ${(props: StatusStyle) => props.color};
`


export const ResouceAddVessel = styled.div`
  width: 100%;
  height: 100%;
`
export const ResouceAddWhiteSpace = styled.div`
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
`
export const ResouceAddHandleTitle = styled.div`
  letter-spacing: 1px;
  font-size: 15px;
  white-space: nowrap;
`

export const RemarkReplyHandleVessel = styled.div<StatusStyle>`
 width: auto;
 height: auto;
 display: flex;
 align-items: center;
 color: ${(props: StatusStyle) => props.color};
 margin-left:10px;
`

export const StepsVessel = styled.div`
  width: auto;
  height: auto;
  max-height: 400px;
  overflow-y: auto;
  padding: 0 5px;
  &::-webkit-scrollbar{
    display: none;
  }
`

export const RemarkReplyUpdateVessel = styled.div`
  width: auto;
  height: auto;
  display: flex;
  align-items: flex-start;
`

